<template>
	<view class="page" style="padding-bottom: 50rpx;">
		<view class="topVue">
			<view class="safeVue" :style="{ height: statusBarHeight + 'rpx' }"></view>
			<view class="flex align-center padding-row30" :style="{ height: barHeight + 'rpx', top: statusBarHeight + 'rpx' }" @click="$tools.back()">
				<image src="../../static/back.png" style="width: 48rpx; height: 48rpx;"></image>
				<text style="line-height: 1; color: #454545; font-weight: 600; font-size: 32rpx; padding-left: 20rpx;">邻工申请</text>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + barHeight + 'rpx' }"></view>
		<view class="item flex align-center margin20 padding-row30">
			<view class="label">姓名</view>
			<input type="text" placeholder="请输入姓名" v-model="name"/>
		</view>
		<view class="item flex align-center margin20 padding-row30">
			<view class="label">手机号</view>
			<input type="text" placeholder="请输入手机号" v-model="phone"/>
		</view>
		<view class="item flex align-center margin20 padding-row30">
			<view class="label">性别</view>
			<u-radio-group v-model="sex" active-color="#D37430">
				<u-radio 
					@change="sexChange" 
					v-for="(item, index) in sexs" :key="index" 
					:name="item.name"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="item flex align-center margin20 padding-row30">
			<view class="label">身份证号</view>
			<input type="text" placeholder="请输入身份证号" v-model="idCard"/>
		</view>
		<view class="item flex align-center margin20 padding-row30">
			<view class="label">地址</view>
			<input type="text" placeholder="请输入地址" v-model="address"/>
		</view>
		<!-- <view class="item flex-center align-center margin20 padding-row30">
			<u-radio-group v-model="type" active-color="#D37430">
				<u-radio 
					@change="typeChange" 
					v-for="(item, index) in types" :key="index" 
					:name="item.name"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		
		<view class="box margin20 flex-between">
			<view class="boxLi" @click="chooseFront()">
				<image :src="imgFront" style="width: 100%; height: 100%;" v-if="imgFront"></image>
				<view v-else>身份证正面</view>
			</view>
			<view class="boxLi" @click="chooseBack()">
				<image :src="imgBack" style="width: 100%; height: 100%;" v-if="imgBack"></image>
				<view>身份证反面</view>
			</view>
		</view>
		<view class="box margin20 flex-between">
			<view class="boxLi" @click="chooseBody()">
				<image :src="imgBody" style="width: 100%; height: 100%;" v-if="imgBody"></image>
				<view v-else>半身图片</view>
			</view>
			<view class="boxLi" @click="chooseLicense()">
				<image :src="imgLicense" style="width: 100%; height: 100%;" v-if="imgLicense"></image>
				<view>上岗证</view>
			</view>
		</view> -->
		
		<!-- <view class="item flex align-center margin20 padding-row30">
			<view class="label">选择项目</view>
			<view class="flex align-center flex-1">
				<view class="flex-1">{{ project }}</view>
				<image src="../../static/more.png" style="width: 42rpx; height: 42rpx; margin-left: 15rpx;"></image>
			</view>
		</view> -->
		
		<view class="box flex-between padding30 margin20" 
			style="background: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);">
			<textarea placeholder="请填写个人简历介绍" v-model="remark"></textarea>
		</view>
		
		<view class="btn margin40" @click="submit()">提交</view>
	</view>
</template>

<script>
	import url from "@/common/url.js"
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				statusBarHeight: 0,
				barHeight: 0,
				name: "",
				phone: "",
				idCard: '',
				address: "",
				remark: "",
				imgFront: "",
				imgBack: "",
				imgBody: "",
				imgLicense: "",
				sexs: [
					{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},
				],
				types: [
					{
						name: '全职',
						value: 1
					},
					{
						name: '兼职',
						value: 0
					},
				],
				type: "全职",
				sex: "男"
			}
		},
		onLoad() {
			let that = this;
			wx.getSystemInfo({
				success(res) {
					let deviceWidth = wx.getSystemInfoSync().windowWidth
					that.statusBarHeight = Number(res.statusBarHeight) * ( 750 / deviceWidth ) 
					let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
					let barHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
					that.barHeight = Number(barHeight) * ( 750 / deviceWidth )
				},
			});
		},
		
		computed: {
			...mapState({
				user: state=> state.user
			})
		},
		
		methods: {
			sexChange(e){
				console.log(e)
				this.sex = e
			},
			typeChange(e){
				console.log(e)
				this.type = e
			},
			
			chooseBody(){
				this.$utils.choose().then(res=>{
					console.log(res)
					uni.showLoading()
					let _this = this
					uni.uploadFile({
						url: `${url.url}/api/WeChat/wechatUpload`,
						filePath: res.tempFilePaths[0],
						name: "file",
						header:{
							"token": uni.getStorageSync("token")
						},
						success: (result) => {
							console.log(result)
							uni.hideLoading()
							let data = JSON.parse(result.data)
							_this.imgBody = data.data
							console.log(_this.imgFront)
						},
						fail(err) {	
							console.log(err)
							uni.hideLoading()
						}
					})
				})
			},
			
			chooseLicense(){
				this.$utils.choose().then(res=>{
					console.log(res)
					uni.showLoading()
					let _this = this
					uni.uploadFile({
						url: `${url.url}/api/WeChat/wechatUpload`,
						filePath: res.tempFilePaths[0],
						name: "file",
						header:{
							"token": uni.getStorageSync("token")
						},
						success: (result) => {
							console.log(result)
							uni.hideLoading()
							let data = JSON.parse(result.data)
							_this.imgLicense = data.data
							console.log(_this.imgFront)
						},
						fail(err) {	
							console.log(err)
							uni.hideLoading()
						}
					})
				})
			},
			
			chooseFront(){
				this.$utils.choose().then(res=>{
					console.log(res)
					uni.showLoading()
					let _this = this
					uni.uploadFile({
						url: `${url.url}/api/WeChat/wechatUpload`,
						filePath: res.tempFilePaths[0],
						name: "file",
						header:{
							"token": uni.getStorageSync("token")
						},
						success: (result) => {
							console.log(result)
							uni.hideLoading()
							let data = JSON.parse(result.data)
							_this.imgFront = data.data
							console.log(_this.imgFront)
						},
						fail(err) {	
							console.log(err)
							uni.hideLoading()
						}
					})
				})
			},
			
			chooseBack(){
				this.$utils.choose().then(res=>{
					console.log(res)
					uni.showLoading()
					let _this = this
					uni.uploadFile({
						url: `${url.url}/api/WeChat/wechatUpload`,
						filePath: res.tempFilePaths[0],
						name: "file",
						header:{
							"token": uni.getStorageSync("token")
						},
						success: (result) => {
							console.log(result)
							uni.hideLoading()
							let data = JSON.parse(result.data)
							_this.imgBack = data.data
							console.log(_this.imgBack)
						},
						fail(err) {	
							console.log(err)
							uni.hideLoading()
						}
					})
				})
			},
			
			async submit(){
				if(!this.name) return this.$u.toast("请输入姓名")
				if(!this.phone) return this.$u.toast("请输入手机号")
				if(!this.idCard) return this.$u.toast("请输入身份证号")
				if(!this.address) return this.$u.toast("请输入地址")
				if(!this.imgFront) return this.$u.toast("请上传身份证正面")
				if(!this.imgBack) return this.$u.toast("请上传身份证反面")
				if(!this.remark) return this.$u.toast("请填写个人简历介绍")
				if(!this.imgBack) return this.$u.toast("请上传半身照片")
				if(!this.imgLicense) return this.$u.toast("请上传上岗证照片")
				const res = await this.$request("/api/WeChat/addHomecareWorker", {
					userId: this.user.id,
					workerName: this.name,
					phoneNo: this.phone,
					sex: this.sex=="男" ? 0 : 1, 
					idNo: this.idCard,
					address: this.address,
					imgFront: this.imgFront, 
					imgBack: this.imgBack ,  
					fulltime: this.type=="全职" ? 0 : 1, 
					description: this.remark,
					imgBody: this.imgBody,
					imgLicense: this.imgLicense
				})
				if(res.code===200) {
					console.log(res)
					this.$u.toast("申请成功")
					setTimeout(()=>{
						uni.$emit("reFrensh")
						this.$tools.back()
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.topVue {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		.safeVue {
			width: 100%;
		}
	}
	.item {
		width: 690rpx;
		height: 92rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.label {
			width: 200rpx;
			color: #454545;
			font-weight: 600;
			line-height: 1;
		}
	}
	.btn {
		width: 520rpx;
		height: 88rpx;
		background: #D37430;
		border-radius: 12rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
	}
	.box {
		width: 690rpx;
		textarea {
			width: 100%;
			height: 150rpx;
			display: block;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #333;
		}
		.boxLi {
			width: 330rpx;
			height: 210rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			position: relative;
			>view {
				width: 100%;
				text-align: center;
				color: #454545;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				font-size: 24rpx;
			}
		}
	}
</style>